<template>
  <div>
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>权限设置
          </p>
        </div>
        <div class="topright" v-show="refresh">
          <el-button type="info" @click="returnBtn;$router.go(-1)"><span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回</el-button>
          <el-button type="info" @click="$router.go(0)"><span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新</el-button>
        </div>
      </div>
    </div>
    <div class="contain">
      <div class="containNav">当前角色：{{orgName}}</div>
      <!--管理-->
      <div class="choose" v-for="(items,index) in nav" :key="items">
        <div class="bg">
          <el-checkbox
            v-model="checkAll[index]"
            @change="checkedAll(checkAll[index],index)"
            style="border:none;"
          >{{items}}</el-checkbox>
        </div>
        <div class="bgs">
          <el-checkbox-group
            v-model="checkedConcat[index]"
            @change="checkedChange(checkedConcat,index)"
          >
            <el-checkbox v-for="item in arrs[index]" :label="item" :key="item.index">{{item}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <div class="checkedAlls">
        <el-checkbox v-model="checkAlls" @change="checkedAlls">选择全部</el-checkbox>
      </div>
      <div class="btnsave">
        <el-button type="success" class="save">保存</el-button>
      </div>
    </div>
  </div>
</template>

  <script>
export default {
  name: "permission",
  data() {
    return {
      title: "权限设置",
      refresh: true,
      checkAll: [false, false, false, false, false], //是否选中
      checkAlls: false, //全选是否选中
      checkedConcat: [[], [], [], [], [],[]], //选中
      nav: ["合同管理", "项目管理", "材料管理", "施工队管理", "财务管理"],
      arrs: [
        [
          "合同添加/编辑",
          "合同删除/恢复",
          "分类添加/编辑",
          " 分类转移/删除",
          "合同属性管理",
          "商品评价管理",
          "商品属性管理",
          "图片批量处理",
          "合同列表批量导出",
          "图片库管理"
        ],
        [
          "项目添加/编辑",
          "项目删除/恢复",
          "分类添加/编辑",
          "分类转移/删除",
          "项目属性管理",
          "项目自动上下架",
          "图片批量处理",
          "项目批量导出",
          " 图片库管理",
          "项目添加/编辑"
        ],
        ["材料添加/编辑", "材料删除/恢复", "材料领用", " 材料退换", "材料自购"],
        [
          "商品添加/编辑",
          "商品删除/恢复",
          "分类添加/编辑",
          "分类转移/删除",
          " 商品属性管理",
          "商品评价管理",
          " 商品自动上下架",
          "图片批量处理",
          "商品批量导出",
          "图片库管理",
          "商品添加/编辑",
          "商品删除/恢复",
          "分类转移/删除",
          "商品属性管理",
          " 商品评价管理",
          "商品自动上下架",
          "图片批量处理",
          "商品批量导出"
        ],
        [
          "商品添加/编辑",
          "商品删除/恢复",
          "分类添加/编辑",
          "分类转移/删除",
          "商品属性管理",
          " 商品评价管理",
          "商品自动上下架",
          "图片批量处理",
          "商品批量导出",
          "图片库管理",
          "商品添加/编辑",
          " 商品删除/恢复",
          "分类转移/删除",
          "商品属性管理",
          "商品评价管理",
          "商品自动上下架",
          "图片批量处理",
          " 商品批量导出"
        ]
      ],
      orgName:''
    };
  },
  activated(){
    this.checkAll = [false, false, false, false, false];
    this.checkAlls = false;
    this.checkedConcat = [[], [], [], [], [],[]];
    this.orgName = this.$route.params.roles.orgName;
  },
  methods: {
    //单个全选
    checkedAll(val, n) {
      this.checkedConcat[n] = val ? this.arrs[n] : [];
      // console.log(this.checkedConcat)
    },
    //单个选择
    checkedChange(value, n) {
      let checkedCount = value.length;
      this.checkAll[n] = checkedCount === this.arrs[n].length;
      // console.log(this.checkedConcat[n])
    },
    //点击全部选择
    checkedAlls() {
      if (this.checkAlls == true) {
        this.checkAll = [true, true, true, true, true];
        this.checkedAll(true, 0);
        this.checkedAll(true, 1);
        this.checkedAll(true, 2);
        this.checkedAll(true, 3);
        this.checkedAll(true, 4);
      } else {
        this.checkAll = [false, false, false, false, false];
        this.checkedAll(false, 0);
        this.checkedAll(false, 1);
        this.checkedAll(false, 2);
        this.checkedAll(false, 3);
        this.checkedAll(false, 4);
      }
    },
      // 返回权限设置
    returnBtn(){
      this.$router.push('/role')
    }
  },
};
</script>

  <style scoped>
li {
  list-style: none;
}
.contain {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid #e4e4e4;
  margin: 20px auto;
}
.contain .containNav {
  background: #f3f3f3;
  padding: 10px 20px;
  font-size: 14px;
  color: #666;
  text-align: left;
}
.contain .choose {
  padding: 10px 20px;
}
.contain .choose .bg {
  background: #f9fafc;
  padding-left: 10px;
  border: 1px solid #e4e4e4;
  box-sizing: border-box;
  text-align: left;
}
.contain .choose .bgs {
  border: 1px solid #e4e4e4;
  border-top: none;
  padding-left: 15px;
  padding-top: 5px;
  padding-bottom: 10px;
  text-align: left;
}
.el-checkbox {
  width: 142px;
  padding: 15px 0;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #48c9b0;
  background-color: #48c9b0;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #48c9b0;
}
.checkedAlls {
  border: 1px solid #e4e4e4;
  width: 1060px;
  margin: 20px auto;
  text-align: center;
  background: #f9fafc;
}
.btnsave {
  text-align: center;
  margin: 40px 0;
}
.save {
  background: #1abc9c;
}
</style>
